<template>
    <div class="mg-b-20">
        <breadcrumb base-title="工具" title="收款账户" :sub-title="subTitle"/>
        <commonTabs v-model:active="active" :tabs="tabs" />
    </div>
    <div class="w-full box-border p-16px">
        <div v-if="active === 'accountLimit'">
            <accountLimit />
        </div>
        <div v-if="active === 'manageAccount'">
            <manageAccount />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import commonTabs from '@/components/commonTabs/index.vue'
import accountLimit from './accountLimit.vue'
import manageAccount from './manageAccount.vue'
// import { useRoute, useRouter } from "vue-router";
// const router = useRouter();
// const route = useRoute();
const active = ref('accountLimit')

const tabs = ref([
    {
        name: '账户额度限制',
        id: 'accountLimit'
    },
    {
        name: '收款管理账户',
        id: 'manageAccount'
    }
])

const subTitle = computed(() => {
    const cur = tabs.value.find(i => i.id === active.value)
    return cur.name
})

</script>

<style lang="scss" scoped>
.container {
    padding: 0 20px;
}
</style>